<template>
    <button class="hook_btn"><span>✔</span></button>
    <button class="intersect_btn"><span>✖</span></button>
    <button class="left_btn"><span>☚</span></button>
    <button class="right_btn"><span>☛</span></button>
    <button class="up_btn"><span>▲</span></button>
    <button class="down_btn"><span>▼</span></button>
    <button class="star_btn"><span>★</span></button>
    <button class="moon_btn"><span>☾</span></button>
    <button class="sun_btn"><span>☀</span></button>
    <button class="love_btn"><span>❤</span></button>
    <button class="mail_btn"><span>✉</span></button>
    <button class="pen_btn"><span>✎</span></button>
    <button class="clipper_btn"><span>✄</span></button>
    <button class="phone_btn"><span>☎</span></button>
    <button class="airplane_btn"><span>✈</span></button>
    <button class="snowman_btn"><span>☃</span></button>
    <button class="spread_btn"><span>☰</span></button>
    <button class="add_btn"><span>＋</span></button>
    <button class="subtraction_btn"><span>－</span></button>
    <button class="multiplication_btn"><span>×</span></button>
    <button class="division_btn"><span>÷</span></button>
    <button class="poison_btn"><span>☠</span></button>
    <button class="biochemistry_btn"><span>☣</span></button>
    <button class="radiation_btn"><span>☢</span></button>
</template>

<script>
export default {
    name: 'ApFillIconButton',
    setup() {

    }
}
</script>

<style scoped lang="css">
.hook_btn,
.intersect_btn,
.right_btn,
.left_btn,
.up_btn,
.down_btn,
.star_btn,
.moon_btn,
.sun_btn,
.love_btn,
.mail_btn,
.pen_btn,
.clipper_btn,
.phone_btn,
.airplane_btn,
.snowman_btn,
.spread_btn,
.add_btn,
.subtraction_btn,
.multiplication_btn,
.division_btn,
.poison_btn,
.biochemistry_btn,
.radiation_btn {
    position: relative;
    padding: 0px;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 30px;
    text-align: center;
    color: rgb(194, 194, 194);
    border: 0px;
    background-color: rgb(46, 46, 46);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.8s ease 0s;
}
.hook_btn span,
.intersect_btn span, 
.right_btn span,
.left_btn span,
.up_btn span,
.down_btn span,
.star_btn span,
.moon_btn span,
.sun_btn span,
.love_btn span,
.mail_btn span,
.pen_btn span,
.clipper_btn span,
.phone_btn span,
.airplane_btn span,
.snowman_btn span,
.spread_btn span,
.add_btn span,
.subtraction_btn span,
.multiplication_btn span,
.division_btn span,
.poison_btn span,
.biochemistry_btn span,
.radiation_btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hook_btn:hover,
.intersect_btn:hover,
.right_btn:hover,
.left_btn:hover,
.up_btn:hover,
.down_btn:hover,
.star_btn:hover,
.moon_btn:hover,
.sun_btn:hover,
.love_btn:hover,
.mail_btn:hover,
.pen_btn:hover,
.clipper_btn:hover,
.phone_btn:hover,
.airplane_btn:hover,
.snowman_btn:hover,
.spread_btn:hover,
.add_btn:hover,
.subtraction_btn:hover,
.multiplication_btn:hover,
.division_btn:hover,
.poison_btn:hover,
.biochemistry_btn:hover,
.radiation_btn:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(141, 141, 141);
    box-shadow: 0px 0px 15px 5px #fff inset;
    transition: all 0.8s ease 0s;
}
.hook_btn:active,
.intersect_btn:active,
.right_btn:active,
.left_btn:active,
.up_btn:active,
.down_btn:active,
.star_btn:active,
.moon_btn:active,
.sun_btn:active,
.love_btn:active,
.mail_btn:active,
.pen_btn:active,
.clipper_btn:active,
.phone_btn:active,
.airplane_btn:active,
.snowman_btn:active,
.spread_btn:active,
.add_btn:active,
.subtraction_btn:active,
.multiplication_btn:active,
.division_btn:active,
.poison_btn:active,
.biochemistry_btn:active,
.radiation_btn:active {
    background-color: transparent;
    box-shadow: 0px 0px 15px 5px rgb(17, 17, 17) inset;
    transition: all 0s ease 0s;
}
</style>